<template>
	<el-table border height="400px" v-el-table-infinite-scroll="load" :data="tableData">
		<el-table-column prop="date" label="日期" width="180"> </el-table-column>
		<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
		<el-table-column prop="address" label="地址"> </el-table-column>
	</el-table>
</template>

<script>
	import elTableInfiniteScroll from 'el-table-infinite-scroll';
	const exampleData = new Array(10).fill({
		date: '2016-05-03',
		name: '王小虎',
		province: '上海',
		city: '普陀区',
		address: '上海市普陀区金沙江路 1518 弄',
		zip: 200333
	});
	export default {
		directives: {
			'el-table-infinite-scroll': elTableInfiniteScroll
		},
		data() {
			return {
				tableData: exampleData,
			}
		},
		created() {
			// this.loading = true
			// setTimeout(() => {
			// 	var list = []
			// 	for (var index = 0; index < 10000; index++) {
			// 		list.push({
			// 			date: '2016-05-07',
			// 			name: '王小虎',
			// 			province: '上海',
			// 			city: '普陀区',
			// 			address: '上海市普陀区金沙江路 1518 弄',
			// 			zip: 200333
			// 		})
			// 	}
			// 	const startTime = Date.now()
			// 	this.tableData = list
			// 	this.loading = false
			// 	this.$nextTick(() => {
			// 		console.log(`渲染完成 ${Date.now() - startTime} 毫秒`)
			// 	})
			// }, 300)
		},
		methods: {
			load() {
				if(this.tableData.length>100){
					this.$message.info("已经到底了");
					return;	
				}
				this.$message.success('加载下一页');
				this.tableData = this.tableData.concat(exampleData);
			}
		}
	}
</script>

<style scoped>

</style>
